<template>
    <!-- <Skeleton :loading="isLoading" :rows="8"> -->
        <div class="c_div0 clearfix">
            <div>
                <el-carousel :interval="4000" type="card" height="260px">
                    <el-carousel-item v-for="(item, i) in photArr" :key="i">
                        <img :src="item.img" alt="" class="c_img" :title="item.tit" @click="recommend(item.id)">
                    </el-carousel-item>
                </el-carousel>
            </div>
            <div class="c_div2 clearfix">
                <p class="c_p2">精选分类</p>
                <div class="c_div1 clearfix" v-for="(v, i) in phoArr2" :key="i">
                    <img :src=v.img alt="" class="c_img2" @click="paths(v.path)">
                    <p class="c_p1">{{ v.title }}</p>
                </div>
            </div>
            <div class="c_hot">
                <p class="c_p3">热门推荐</p>
                <div class="c_div3 clearfix" v-for=" (v, i) in phoArr3" :key="i">
                    <div class="c_div4">
                        <a :href="v.vedio"><img :src=v.img alt="" class="c_img3"></a>
                        <div class="c_hot1">
                            <p class="c_p4">{{ v.title }}</p>
                            <p class="c_p5">{{ v.content }}</p>
                        </div>
                        <div id="c_collect">
                            <i class="iconfont icon-Favorite2 c_xing" :class="{ 'liked': v.liked, 'not-liked': !v.liked }"
                                @click="v.liked ? handleUnlike(v.id) : handleLike(v.id)"></i>
                            <span class="c_cllo">已收藏<i>{{ v.count }}</i>人</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="c_div7 clearfix">
                <p class="c_p4">其他推荐</p>
                <div v-for=" (v, i) in phoArr4" class="c_div6" :key="i">
                    <div class="c_blowup">
                        <img :src=v.img alt="" class="c_img4">
                    </div>
                    <p class="c_p6" @click="showa(v.id)" type="primary" style="margin-left: 16px;">{{ v.title }}</p>
                </div>
            </div>

            <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">
                <div>
                    <p class="c_nam">{{ this.title }}:</p>
                    <p class="c_cont">{{ this.content }}</p>
                </div>
            </el-drawer>
            <el-main style="overflow:visible"></el-main>
        </div>
    <!-- </Skeleton> -->
</template>
  
<style lang="less" scoped>
* {
    margin: 0;
    padding: 0;
}

.liked {
    color: red;
}

.not-liked {
    color: black;
}

template {
    overflow: hidden; // 都隐藏
    overflow-x: hidden; // 隐藏横向
    overflow-y: hidden; // 隐藏纵向
}

.c_div0 {
    margin: auto;

    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }

    .c_img {
        width: 100%;
        height: 300px;
    }

    .c_div2 {
        width: 1000px;
        margin: auto;
        margin-bottom: 20px;

        .c_p2 {
            margin-top: 60px;
            height: 50px;
            border-bottom: 1px solid rgb(229, 226, 226);
            line-height: 50px;
            margin-bottom: 30px;
            font-weight: bold;
            font-size: 20px;
        }

        .c_div1 {
            margin: 0 auto;
            float: left;
            margin-left: 100px;

            .c_img2 {
                width: 120px;
                height: 120px;
                border-radius: 50%;
                margin-left: 60px;
                background-size: contain;
            }

            .c_p1 {
                font-size: 16px;
                margin-left: 59px;
            }
        }
    }

    .c_p3 {
        height: 50px;
        margin-top: 70px;
        border-bottom: 1px solid rgb(229, 226, 226);
        line-height: 50px;
        margin-bottom: 10px;
        font-weight: bold;
        font-size: 20px;
    }

    .c_hot {
        margin: auto;
        width: 1000px;
        position: relative;

        .c_div3 {
            margin-top: 60px;
            margin: auto;
            width: 300px;
            height: 200px;
            margin-top: 60px;
            margin-left: 25px;
            // border: 1px solid rgb(183, 179, 179);
            float: left;

            .c_div4 {
                &:hover {
                    .c_hot1 {
                        display: block;
                    }
                }

                .c_img3 {
                    // float: left;
                    width: 300px;
                    height: 210px;
                }

                .c_hot1 {
                    // z-index: 9000;
                    position: absolute;
                    // top: 215px;
                    display: none;
                    margin-top: -120px;
                    width: 300px;
                    height: 116px;
                    background-color: rgba(119, 78, 2, 0.5);


                    .c_p4 {
                        font-size: 14px;
                        line-height: 50px;
                        font-weight: bold;
                        color: white;
                    }

                    .c_p5 {
                        margin: auto;
                        // text-align: left;
                        color: white;
                        width: 250px;
                        font-size: 13px;
                    }
                }
            }

            #c_collect {
                text-align: left;
                margin-left: 20px;

                .c_xing {

                    line-height: 10px;
                    font-size: 16px;
                    margin-left: 20px;
                    cursor: pointer;

                }

                .c_cllo {

                    font-size: 12px;
                    color: #797878;
                }

                .c_alrea {
                    margin-left: 40px;
                    font-size: 12px;
                    color: #797878;
                }
            }

        }
    }

    .c_div7 {
        width: 1000px;
        margin: auto;
        margin-top: 600px;

        .c_p4 {
            height: 50px;
            margin-top: 80px;
            border-bottom: 1px solid rgb(229, 226, 226);
            line-height: 50px;
            margin-bottom: 50px;
            font-weight: bold;
            font-size: 20px;
        }

        .c_blowup {
            width: 300px;
            height: 210px;
            overflow: hidden;
            border-radius: 10px;

            // border: 1px solid black;
            .c_blowup>img {
                -webkit-transform: scale(1);
                -webkit-transition: all .10s linear;
            }

            &:hover img {
                -webkit-transform: scale(1.3);
            }

        }

        .c_div6 {
            float: left;
            margin-left: 25px;
            margin-top: 20px;

            .c_img4 {
                width: 300px;
                height: 210px;
                border-radius: 10px;
                transform: scale(1);
            }


            .c_p6 {
                cursor: pointer;
                margin-top: 10px;
                color: #797878;
                font-weight: bold;

            }
        }

        margin-bottom: 100px;

    }

    .clearfix:after {
        visibility: hidden;
        display: block;
        content: " ";
        clear: both;
    }
}
</style>
<script>
import axios from 'axios';
export default {
    data() {
        return {
            photArr: [],
            phoArr2: [],
            phoArr3: [],
            phoArr4: [],
            checkid: 0,
            favroites: [],
            addData: [],
            Arr5Data: [],
            isLoading: true, // 控制骨架瓶显示与隐藏
            items: [], // 实际数据
            isLiked: false,
            likes: 1000,
            checkData: {
                id: '',
                title: '',
                content: '',
            },
            id: '',
            title: '',
            content: '',

            drawer: false,
        }
    },
    methods: {

        paths(path) {
            this.$router.push(path);
        },
        showa(v) {
            let str = '/dbdata/phoArr4/' + v;
            axios({
                url: str,
                methods: 'post',
            }).then((res) => {
                this.drawer = true;
                this.title = res.data.title;
                this.content = res.data.content;
                sessionStorage.setItem('phoArr4', this.liked);

            })
        },
        //收藏点击
        handleLike(id) {
            let like = this.phoArr3.find(item => item.id === id);
            if (like) {
                like.liked = true;
                like.count++;
            }
            axios({
                url: '/dbdata/phoArr5',
                method: 'post',
                data: {
                    img: like.img,
                    count: like.count,
                    title: like.title,
                    content: like.content,
                    liked: 'true',
                    vedio: like.vedio,
                    id: id
                }
            }).then(({ data }) => {
                this.count++;
                this.$message.success('收藏成功');
            });
        },
        handleUnlike(id) {
            let like = this.phoArr3.find(item => item.id === id);
            if (like) {
                like.liked = false;
                like.count--;
            }
            console.log(id);
            axios({
                url: '/dbdata/phoArr5/' + id,
                method: 'delete',
            }).then(() => {
                this.$message.error('取消收藏')
            })
        },
        randomImage() {
            let a = this.phoArr3.slice().sort(() => Math.random() - 0.5);
            let b = a.slice(0, 6);
            this.phoArr3 = b;
            console.log(b);
        },
        recommend(v) {
            for (let i = 0; i < this.photArr.length; i++) {
                if (v == this.photArr[i].id) {
                    this.$router.push({ path: '/HappyHome/live/Dayrecommend', query: { data: this.photArr[i].StepData } });
                }
            }
        }
    },
    mounted() {
        this.isLoading = false;
        axios({
            url: '/dbdata/photArr',
        }).then(({ data }) => {
            this.photArr = data;
            let a = this.photArr.slice().sort(() => Math.random() - 0.4);
            let b = a.slice(0, 5);
            this.photArr = b;
        }),
            axios({
                url: '/dbdata/phoArr2',
            }).then(({ data }) => {
                this.phoArr2 = data;
                return axios({
                    url: '/dbdata/phoArr3',
                })
            }).then(({ data }) => {
                this.phoArr3 = data;
                this.randomImage();
                return axios({
                    url: '/dbdata/phoArr4',
                })
            }).then(({ data }) => {
                this.phoArr4 = data;
            })
        console.log(this.phoArr3);
    }
}
</script>
<style scoped lang="less">
.c_div1 {
    .c_div2 {
        float: left;

        .c_img {
            text-align: left;
            width: 200px;
            height: 200px;
            border-radius: 10px;
            margin-top: 30px;
            margin-left: 60px;

        }
    }
}

.el-drawer {
    .c_nam {
        text-align: left;
        color: red;
        margin-top: 20px;
        margin-left: 10px;
    }

    .c_cont {
        text-align: left;
        margin-top: 5px;
        text-indent: 2em;
        margin-left: 10px;

    }
}
</style>